<template>
    <h1>Hello World!!!!!</h1>
    <div class="transition">
        <!--  超链接跳转到page1-->
        <p><router-link to="/page1">跳转到页面1</router-link></p>
        <!--通过代码做跳转-->
        <p><button @click="toPage1()">跳转到页面1</button></p>
        <!--  超链接跳转到page2-->
        <p><router-link to="/page2">跳转到页面2</router-link></p>
        <!--通过代码做跳转-->
        <p><button @click="toPage2()">跳转到页面2</button></p>
    </div>
    <div class="show">
        <router-view></router-view>
    </div>

</template>

<script>
export default {
    name: "Index",
    methods:{
        //跳转页面的方法
        toPage1(){
            //路由跳转page1
            this.$router.push({path:'/page1'})
        },
        //路由跳转page2
        toPage2(){
            this.$router.push({path:'/page2'})
        }
    }
}
</script>

<style scoped>
.transition{
    float: left;
    position: relative;
    left:20px;
}
.show{
    position:relative;
    top:100px;
}
</style>